/*
    1、连接socket.io服务
*/




var socket = io('http://localhost:3000');

var userName = '', avatar = ''

// 点击头像 给选中的头像加边框，获取选中的头像的地址
$('.avatar-ul li').on('click', function () {
    $(this).addClass('now').siblings().removeClass('now')
})

// 点击登录获取用户名和头像的地址
$('#login').on('click', function () {
    userName = $('.username').val()
    if (userName === '') {
        alert('请输入用户名')
        return
    }
    avatar = $('.avatar-ul li.now img').attr('src')
    // 客户端注册登录事件，把用户名和头像发给服务端
    socket.emit('login', {
        userName: userName,
        avatar: avatar
    })
})
// 登录成功 登录页面淡出，聊天页面淡入
socket.on('loginSuccess', data => {
    $('.login-box').fadeOut()
    $('.chart-box').fadeIn()
    // 设置个人信息
    userName = data.userName
    avatar = data.avatar
    console.log(userName, avatar)
})
// 登录失败
socket.on('loginError', data => {
    alert(data.msg)
})
// 监听添加用户的消息
socket.on('addUser', data => {
    console.log(data)
    // 分辨出谁是当前页面的用户
    if (userName === data.userName) {
        $('.user img').attr('src', data.avatar)
        $('.user span').text(data.userName)
    } else {
        // 告诉所有人，有新用户加进来了
        $('.bd').append(`
            <div class='message-box'>
                <p><span class="new-user">${data.userName}进入了聊天室</span></p>
            </div>
        `)
        scrollIntoView()
    }
})
// 监听用户离开的消息
socket.on('delUser', data => {
    // 分辨出谁是当前页面的用户
    // $('.bd').html('')
    // 告诉所有人，有用户离开了
    if (data.userName) {
        $('.bd').append(`
            <div class='message-box'>
                <p><span class="remove-user">${data.userName}离开了聊天室</span></p>
            </div>
        `)
        // scrollIntoView()
    }

})
// 监听用户列表的消息  当前聊天室人数
socket.on('userNum', data => {
    var data = JSON.parse(data)
    $('.chart-num span').text(`聊天室(${data.length})`)
    // 除了本人。把其他人的头像和名字展示在左边
    // 先清空其他成员，在添加
    $('.other-user').html('')
    data.find(item => {
        if (userName === item.userName) {

        } else {
            $('.other-user').append(`
                <li><img src="${item.avatar}" alt="">${item.userName}</li>
            `)
        }
    })
})


/* 聊天功能 
    点击发送： 获取输入的内容，去掉空格，发给服务器 ，服务器广播给所有用户
    发送完之后清空输入框的内容
*/
$('.send-message button').on('click', () => {
    var connect = $('.message-div').text()
    socket.emit('sendMessage', {
        msg: connect,
        userName: userName,
        avatar: avatar
    })
    $('.message-div').text('')
    console.log(userName)
})

// 监听的聊天消息
socket.on('receiveMessage', data => {
    console.log(data)
    // 别人的消息展示在左边
    if (userName !== data.userName) {
        $('.bd').append(`
            <div class='message-box'>
                <div class="other-msg-box">
                    <img src="${data.avatar}" alt="" class="other-avatar">
                    <div class="other-msg">
                        <p>${data.userName}</p>
                        <div class='other-msg-p'>${data.msg}</div>
                    </div>
                </div>
            </div>
        `)
    } else {
        // 自己的消息展示在右边
        $('.bd').append(`
            <div class='message-box'>
                <div class="my-msg-box">
                    <img src="${avatar}" alt="" class="my-avatar">
                    <div class="my-msg">${data.msg}</div>
                </div>
            </div>          
        `)
    }
    scrollIntoView()
})

// 当前元素的底部滚动到可视区
function scrollIntoView() {
    var dom = document.getElementsByClassName("message-box")
    var domNum = dom.length
    var lastMsg = dom[domNum-1]
    lastMsg.scrollIntoView(false)

}



// jquery表情插件
// http://eshengsky.github.io/jQuery-emoji/
